<template>
  <div>

<el-form label-width="80px"  style="padding:20px">

      <el-row :gutter="24">
   <el-col :span="8"> 
     
  <el-form-item label="标题名称">
      <el-input v-model="ColumnName" />
  </el-form-item>
   </el-col>
   <el-col :span="5">
  <el-form-item >
      <el-checkbox label="是否显示" name="type" v-model="isHide" ></el-checkbox>
  </el-form-item>
     
   </el-col>
   <el-col :span="5">
       <el-form-item >
						<!-- <el-button  @click="saveColumnItem()" type="primary" plain>保存</el-button> -->
  </el-form-item>
     
   </el-col>

   
   </el-row>
</el-form>


  <!-- <el-row>
   <el-col :span="10"> 
						<el-button  @click="doLinkCarMaintain()" type="primary" plain>添加车型</el-button>
   </el-col>
   </el-row> -->


<div v-loading="modelTableLoading">


  <el-row>
    <el-col :span="12">
              <h2 style="display:flex;align-items:center;    padding: 20px 0px;height: 40px;margin: 0;">

<el-button style="margin: 0 20px" type="info" plain="" size="mini" @click="doCancelCar(true,'0000')"  icon="el-icon-delete">清空</el-button>适配车型
</h2>
        <el-table :data="maintainCarList" ref="maintainCarList" highlight-current-row   @selection-change="changeCancelList"
            max-height="500" height="500"
        >
           <!-- <el-table-column type="selection" width="50px" align="center" fixed="left" ></el-table-column> -->
			  <el-table-column prop="id" label="车型ID" width="100" sortable>
			  </el-table-column>

        <el-table-column prop="seriesName" label="系列名称" width="180" sortable>
			  </el-table-column>

      <el-table-column prop="brandName" label="品牌名称" width="100" sortable>
			</el-table-column>
      <el-table-column prop="modelName" label="车型名称" width="200" sortable>
			</el-table-column>

             <el-table-column prop="years" label="年份" width="100" sortable>
			</el-table-column>

         <el-table-column prop="style" label="风格" width="160" sortable>
			</el-table-column>
                    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="doCancelCar(false,scope.row.id)"
          type="text" style="color:red"
          size="small" icon="el-icon-delete">
          移除
        </el-button>
      </template>
    </el-table-column>
        </el-table>
    <div class="block" align="right" >
                    <br>
                    <el-pagination @current-change="handleCurrentProductChange" layout=" prev, pager, next" :page-size="20" :total="pdcount">
                    </el-pagination>
                </div>
              
</el-col>



            <el-col :span="12">
<div style="text-align:center;padding:20px 0;position: relative;"> 
   

     <el-button  @click="screenShow= true ">选择筛选条件</el-button>
             <el-button  @click="filterShow2=true">车型ID筛选</el-button>

    <span  style="position: absolute;left: 0;" v-show="modelTableShow"> <el-button @click="bindAllCar" type="primary" size="mini">关联{{count}}条结果</el-button></span>
</div>

<div style="height:570px" >
  <el-table ref="multipleTable" v-show="modelTableShow" :data="modelData.modelList" style="width:100%;font-size:15px" stripe border max-height="500" height="500" @selection-change="setSelected" size="small">
        <!-- <el-table-column type="selection" width="50px" align="center" fixed="left"></el-table-column> -->

        <el-table-column v-for="tableHeader in modelData.headerList" :key="tableHeader.keyId" :label="tableHeader.keyName" min-width="150px" align="center">
          <template slot-scope="scope">
            <div style='width:100%:height:100%'>
              <span >{{scope.row[tableHeader.keyId].text}}</span>
            </div>
          </template>
        </el-table-column>
                     <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="addSelectCarByModelId(scope.row.modelId)"
          type="text" 
          size="small" icon="el-icon-plus" :disabled="scope.row.dis">
          添加关联
        </el-button>
      </template>
    </el-table-column>
      </el-table>
   
      <div class="block" align="right"  v-show="modelTableShow" >
                    <br>
                    <el-pagination @current-change="handleCurrentChange" layout=" prev, pager, next" :page-size="20" :total="count">
                    </el-pagination>
                </div>

 
              </div>





</el-col>
        
              <!-- <div style="text-align:center;padding:20px">
              <el-button type="primary" @click="maintainData.doSubmit">保存</el-button>
              <el-button @click="maintainData.show=false" >关闭</el-button>
              </div> -->



   </el-row>


              </div>





        <el-dialog :visible.sync="maintainData.show" title="过滤车型信息" width="90%" :close-on-click-modal='false'>

              
      </el-dialog>


      <el-dialog :visible.sync="carMainTain.show" width="90%" :close-on-click-modal='false'>
























 <el-row  :gutter="24">
      
    
            <el-col :span="12">
              <div>
                				<el-button type="primary" @click="queryColumnNewGroup()">添加栏目至该分组</el-button>
              </div>
    <el-table :data="carGroupMainList" 
            max-height="500" height="500"
        >

      <el-table-column
      label="序号"
      type="index"
      width="55" >
    </el-table-column>

        <el-table-column   prop="date"  label="栏目名字" width="180" sortable>
            <template scope="scope">
                            <span>{{ scope.row.maintainColumnName}}</span>
                        </template>
			  </el-table-column>

      


        <el-table-column label="操作" >
                        <template scope="scope">
                            <el-button type="primary" size="small" @click="queryEditAttribute(scope.row)">查看属性</el-button>
                            <el-button type="danger" size="small" @click="delColumn(scope.row)">删除</el-button>
                            
                        </template>
    </el-table-column>

        </el-table>

</el-col>



         <el-col :span="12">

    <el-table :data="AttributeList" 
            max-height="500" height="500"
          style="width: 120%;">


      <el-table-column
      label="序号"
      type="index"
      width="55" >
    </el-table-column>

          <el-table-column
      prop="date"
      label="属性名" sortable
   >
    <template scope="scope">
                            <span>{{ scope.row.maintainName}}</span>
                        </template>
    </el-table-column>


       <el-table-column
      prop="date"
      label="属性类型" sortable
   >
    <template scope="scope">
                            <span>{{ handleContentType(scope.row.contentType)}}</span>
                        </template>
    </el-table-column>
      


       <el-table-column
      prop="date"
      label="显示内容" sortable
   >
    <template scope="scope">
                            <span>{{ scope.row.content}}</span>
                        </template>
    </el-table-column>
      
       <el-table-column
      prop="date"
      label="显示状态" sortable
   >
    <template scope="scope">
                            <span>{{scope.row.showStatus ?'显示':'隐藏'}}</span>
                        </template>
    </el-table-column>

       <el-table-column
      prop="date"
      label="链接内容" sortable 
   >
    <template scope="scope" >



                            <span>{{ scope.row.contentUrl}}</span>



                        </template>
    </el-table-column>

        <el-table-column label="操作"  width="200">
                        <template scope="scope">
                            <el-button type="primary" size="small" @click="queryEidtAttribute(scope.row)">编辑</el-button>

                          
                            <el-button :type="scope.row.showStatus ?'danger':''" size="small" @click="eidtAttributeHidden(scope.row)">{{scope.row.showStatus ?'隐藏':'显示'}}</el-button>
                            
                        </template>
    </el-table-column>

        </el-table>

</el-col>

          </el-row>
        

        




      </el-dialog>



      <el-dialog :visible.sync="maintainInfoDialog.show" width="90%" :close-on-click-modal='false'>


      <el-table :data="maintainInfoDialog.maintainList" highlight-current-row 
       max-height="300"
       style="width: 120%;"
        @selection-change="maintainInfoDialog.onChange"
       >
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="infoId" label="维保信息id" width="100" sortable>
			</el-table-column>

      <el-table-column prop="groupName" label="组名" width="180" sortable>
			</el-table-column>

      <el-table-column prop="infoName" label="维保信息名" width="100" sortable>
			</el-table-column>

      <el-table-column prop="content" label="内容说明" width="200" sortable>
			</el-table-column>

        <el-table-column prop="contentUrl" label="内容说明" width="200" sortable>
			</el-table-column>

    	</el-table>




            <span slot="footer" class="dialog-footer">
                <el-button @click="maintainInfoDialog.show=false">取 消</el-button>
                <el-button type="primary" @click="maintainInfoDialog.submitData">确 定</el-button>
            </span>

      
      </el-dialog>









   <el-dialog title="筛选" :visible.sync="screenShow" width="500" center top="10vh" :close-on-click-modal='false'>
            <div id="limit-switch">
                <!-- <span>筛选结果分页</span><el-switch v-model="limit" active-color="#409EFF" inactive-color="#B4BCCC"></el-switch> -->
            </div>
            <div id="screen-main">

    
               <el-table :data="list" style="width:100%;" height="500" @selection-change="setKeyIds" size="mini" >
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column prop="keyName" label="属性名称" width="200" align="center"></el-table-column>
                <el-table-column label="筛选关键词" align="center" width="250">
                    <template slot-scope="scope">
                        <el-autocomplete
                            style='width:220px' 
                            placeholder="请输入筛选关键词" 
                            :value='scope.row.text'
                            @focus="inputFocus(scope.row)"
                            @input="inputed"
                              :fetch-suggestions="querySearch2"
                            size="mini">
                              <template slot-scope="props">
                                    <div class="name">{{ props.item.valueKey }}</div>
                                </template>
                                </el-autocomplete>
                    </template>
                </el-table-column>
            </el-table>



            


            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="screenShow=false">取消</el-button>
              <el-button type="primary" @click="onsubmit">确定</el-button>
            </span>
        </el-dialog>






















   <el-dialog title="选择栏目" :visible.sync="columnNewGroupModel" width="50%" center top="10vh" :close-on-click-modal='false'>
     

  <el-table :data="columnNewGroupList" highlight-current-row 
       max-height="500" height="500"
       style="width: 120%;"
       @selection-change="setCarGroupMainList" >
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
	    <el-table-column
      prop="date"
      label="栏目名称" sortable
   >
    <template scope="scope">
                            <span>{{ scope.row.maintainColumnName}}</span>
                        </template>
    </el-table-column>
  <el-table-column
      prop="date"
      label="分类" sortable
   >
    <template scope="scope">

      <span>   {{scope.row.parentName}} &nbsp; - > &nbsp;  {{scope.row.catName}}</span>
                        </template>
    </el-table-column>
    	</el-table>


            <span slot="footer" class="dialog-footer">
              <el-button @click="columnNewGroupModel=false">取消</el-button>
              <el-button type="primary" @click="addSubmitAddNewGroup">确定</el-button>
            </span>
        </el-dialog>










   <el-dialog title="编辑属性" :visible.sync="editAttribute" width="70%" center top="10vh" :close-on-click-modal='false'>


     <el-form :model="attributeForm"  label-width="8em">

   
    <el-row :gutter="24" class="row-container">
                    <el-col :span="15" :offset="2">
                  
       <el-form-item label="属性名：">
          <span>{{attributeForm.maintainName}}</span>
  </el-form-item>
            </el-col>
                </el-row>


     <el-row :gutter="24" class="row-container">
                    <el-col :span="15" :offset="2">
                  
       <el-form-item label="属性类型：">
          <span>{{handleContentType(attributeForm.contentType)}}</span>
  </el-form-item>
        </el-col>
                </el-row>


    <el-row :gutter="24" class="row-container">
                    <el-col :span="15" :offset="2">
       <el-form-item label="属性显示内容：">
            <el-input v-model="attributeForm.content" placeholder="请输入属性显示内容"></el-input>
  </el-form-item>
         </el-col>
      </el-row>

       <el-form-item  v-if="attributeForm.contentType==='IMAGE'">
                              <el-upload :action="uploadModel.uploadUrl" list-type="picture-card"
                 :on-preview="uploadModel.onPreview" 
                :on-remove="uploadModel.onRemove" 
                :on-success="uploadModel.onUploadSuccess" 
                :file-list="uploadModel.fileList">
                    <i class="el-icon-plus"></i>
                </el-upload>

  </el-form-item>
      <el-row :gutter="24" class="row-container" v-if="attributeForm.contentType==='URL'">
                    <el-col :span="15" :offset="2">
       <el-form-item label="链接内容：">
            <el-input v-model="attributeForm.contentUrl" placeholder="请输入关联的链接"></el-input>
  </el-form-item>
         </el-col>
                </el-row>


     </el-form>


    <span slot="footer" class="dialog-footer">
              <el-button @click="editAttribute=false">取消</el-button>
              <el-button type="primary" @click="doEditAttribute()">确定</el-button>
            </span>
        </el-dialog>

 <el-dialog title="筛选" :visible.sync="filterShow2" width="580px" center top="50px" :close-on-click-modal='false' >
            <el-table :data="list" style="width:100%;" :height="500" @selection-change="setKeyIds" size="mini" :span-method="objectSpanMethod">
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column prop="keyName" label="属性名称" width="200" align="center"></el-table-column>
                <el-table-column :label="'车型Id ('+countId+')'" align="center" width="250">
                    <template slot-scope="scope">
                        <div :style="'width:100%;height:'+list.length*36+'px;'">
                            <el-input @input="textareaInput" type="textarea" :rows="list.length*1.7"  placeholder="请将Excel中的车型Id复制进输入框" v-model="textarea" resize="none"></el-input>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
              <el-button @click="filterShow2=false">取消</el-button>
              <el-button type="primary" @click="idSubmit">确定</el-button>
            </span>
        </el-dialog>


  </div>
</template>

<script>
import * as Api from "@/api/Api.js";
import * as Config from "@/api/Config.js";
import * as CarApi from "@/api/CarApi.js";
import * as MaintainApi from "@/api/GoodsMaintainApi.js";
import * as RoundApi from "@/api/RoundApi.js";
import axios from "axios";

import maintain from "@/components/maintain/MaintainComponent";

export default {
  data() {
    return {
      pagepdIndex: 0,

      pdcount: 0,
      pageIndex: 1,
      currentPage:1,
      filterModelType:'atrr',
      count: 0,
      doCancelCar: (isAll,carIds) => {
        let optMessage = "";

        if (isAll) {
          optMessage = "所有该商品的";
        }
        this.$confirm("此操作将解除关联" + optMessage + "车型, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let modelMove = {
              goodsId: this.goodsId,
              carIds: ""
            };
            if (!isAll) {
              // let moveSelectModel = [];
              // this.cancelCar.selectCancelList.forEach((item, index) => {
              //   moveSelectModel.push(item.goodsCarLinkId);
              // });

              modelMove.carIds = carIds
            }

            MaintainApi.cancelPDLinkCarList(this, modelMove).then(res => {
              if (res.retCode) {
                console.log("取消商品匹配车型", res);
                this.queryColuMainInfo();
              } else {
                this.$message("保存车型错误");
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      cancelCar: {
        show: false,
        selectCancelList: []
      },
      textarea: "",
      filterShow2: false,
      countId: 0,

      ColumnName: "",
      isHide: false,
      initHaveCarList: [],
      attributeForm: {},

      uploadModel: {
        uploadUrl: "",
        fileList: [],
        onRemove: (file, fileList) => {
          this.uploadModel.fileList = fileList;
        },

        onPreview: file => {
          this.imageDialogModel.imageUrl = file.url;
          this.imageDialogModel.show = true;
        },

        onUploadSuccess: (response, file, fileList) => {
          let dt = {
            name: "1.png",
            url: response.data.filename
          };
          this.uploadModel.fileList.push(dt);
        },

        doPreview: () => {}
      },

      AttributeList: [],
      editAttribute: false,
      columnNewGroupModel: false,
      modelTableLoading: false,

      carGroupMainList: [],
      columnNewGroupList: [],
      selectClumnNewGroup: [],
      screenShow: false,
      list: [],
      keyIds: [],
      modelTableShow: false,
      modelData: {}, //列表对象
      //列表
      editerData: {
        show: false,
        selectedModel: [],
        model: {},
        propertyKey: {
          keyId: "",
          keyName: "",
          propertyType: ""
        }
      },
      dialogType: "car",
      maintainColumnList: [],

      maintainCarList: [],

      maintainList: [],
      selectCarIdList: [],
      columnGroupMap: {},
      carMainTain: { show: false },
      maintainData: {
        show: false,
        groupId: "",

        doSubmit: () => {


          let count = 0;
          this.modelTableLoading = true;
          let addSelectModel = [];
          let moveSelectModel = [];

          this.editerData.selectedModel.forEach((item, caridIndex) => {
            let keyModel = false;
            //选择的
            this.initHaveCarList.forEach((model, modelIndex) => {
              //已有的

              if (item.modelId === model.id) keyModel = true;
            });
            if (!keyModel) {
              addSelectModel.push(item.modelId);
            }
          });

          // this.initHaveCarList.forEach((item, caridIndex) => {
          //   let keyModel = false;
          //   //已有的
          //   this.editerData.selectedModel.forEach((model, modelIndex) => {
          //     //选择的
          //     if (item.id === model.modelId) keyModel = true;
          //   });
          //   if (!keyModel) {
          //     moveSelectModel.push(item.goodsCarLinkId);
          //   }
          // });

          if (addSelectModel.length > 0) {
            let modelAdd = {
              goodsId: this.goodsId,
              carIds: addSelectModel.join(",") //车型ID字符串 逗号隔开
            };
            MaintainApi.doPDLinkCarList(this, modelAdd).then(res => {
              if (res.retCode) {
                console.log("商品匹配车型", res);
                // if (moveSelectModel.length > 0) {
                //   let modelMove = {
                //     goodsId: this.goodsId,
                //     goodsCarLinkIds: moveSelectModel.join(",")
                //   };
                //   MaintainApi.cancelPDLinkCarList(this, modelMove).then(res => {
                //     if (res.retCode) {
                //       console.log("取消商品匹配车型", res);
                //       this.queryColuMainInfo();
                //     } else {
                //       count++;
                //       this.$message("保存车型错误");
                //       this.modelTableLoading = false;
                //     }
                //   });
                // } else {
                //   this.queryColuMainInfo();
                // }
                this.queryColuMainInfo();
              } else {
                count++;
                this.$message("保存车型错误");
              }
            });
          }
          //  else {
          //   if (moveSelectModel.length > 0) {
          //     let modelMove = {
          //       goodsId: this.goodsId,
          //       goodsCarLinkIds: moveSelectModel.join(",")
          //     };
          //     MaintainApi.cancelPDLinkCarList(this, modelMove).then(res => {
          //       if (res.retCode) {
          //         console.log("取消商品匹配车型", res);
          //         this.queryColuMainInfo();
          //       } else {
          //         count++;
          //         this.$message("保存车型错误");
          //         this.modelTableLoading = false;
          //       }
          //     });
          //   } else {
          //     this.queryColuMainInfo();
          //   }
          // }
          if (count == 0) {
            this.$message("匹配成功");
          }
          this.modelTableLoading = false;
        }
      },

      maintainInfoDialog: {
        show: false,
        maintainList: [],

        maintainListSelected: [],

        onChange: value => {
          this.maintainInfoDialog.maintainListSelected = value;
        },

        open: () => {
          console.log("================");
          if (this.maintainCarList.length < 1) {
            this.$alert("请选择车型信息");
            return;
          }
          console.log("-------");
          let carIdList = [];
          for (let i in this.maintainCarList) {
            let dt = this.maintainCarList[i];

            carIdList.push(dt.id);
          }

          let carIdString = carIdList.join(",");

          console.log(carIdList);
          console.log(this.catId);
          console.log("-------");

          MaintainApi.queryMaintainList(this.catId, carIdString).then(res => {
            if (!res.retCode) {
              this.$alert("查询维保关联信息出错");
              return;
            }

            this.maintainInfoDialog.show = true;
            this.maintainInfoDialog.maintainList = res.data;
          });
        },
        submitData: () => {
          for (let i in this.maintainInfoDialog.maintainListSelected) {
            let dt = this.maintainInfoDialog.maintainListSelected[i];
            this.maintainList.push(dt);
          }

          this.maintainInfoDialog.show = false;
        }
      },

      maintainCarDialog: {
        show: false,
        carList: [],

        carListSelected: [],

        checkInArray: dt => {
          for (let i in this.maintainCarList) {
            if (dt.id == this.maintainCarList[i].id) {
              return false;
            }
          }

          return true;
        },

        submitCarList: () => {
          for (let i in this.maintainCarDialog.carListSelected) {
            if (
              this.maintainCarDialog.checkInArray(
                this.maintainCarDialog.carListSelected[i]
              )
            ) {
              this.maintainCarList.push(
                this.maintainCarDialog.carListSelected[i]
              );
            }
          }

          this.maintainCarDialog.show = false;
        },

        onChange: vals => {
          Object.assign(this.maintainCarDialog.carListSelected, vals);
        }
        // open: () => {
        //   Api.queryGoodsCarLink(this, this.goodsId).then(res => {
        //     if (!res.retCode) {
        //       this.$alert("查询车型关联信息出错！");
        //       return;
        //     }
        //     this.maintainCarDialog.carList = res.data;
        //   });
        // }
      },

      maintainItems: {
        show: false
      },

      columnModel: {
        show: false,
        name: ""
      },

      groupModel: {
        show: false,
        name: "",
        currentColumnId: ""
      },

      maintainModel: {
        show: false
      }
    };
  },
  props: ["goodsId", "catId"],

  watch: {
    goodsId() {
      console.log("query  main....");

      this.loadAllColumn();
    },
    
  },

  components: {
    maintain
  },

  methods: {
    addSelectCarByModelId(modelId){
 let modelAdd = {
              goodsId: this.goodsId,
              carIds: modelId
            };
            MaintainApi.doPDLinkCarList(this, modelAdd).then(res => {
              if (res.retCode) {
                console.log("商品匹配车型", res);
                     this.$message("添加关联车型成功");

                // if (moveSelectModel.length > 0) {
                //   let modelMove = {
                //     goodsId: this.goodsId,
                //     goodsCarLinkIds: moveSelectModel.join(",")
                //   };
                //   MaintainApi.cancelPDLinkCarList(this, modelMove).then(res => {
                //     if (res.retCode) {
                //       console.log("取消商品匹配车型", res);
                //       this.queryColuMainInfo();
                //     } else {
                //       count++;
                //       this.$message("保存车型错误");
                //       this.modelTableLoading = false;
                //     }
                //   });
                // } else {
                //   this.queryColuMainInfo();
                // }
                this.queryColuMainInfo();
              } else {
             this.$message("添加关联车型错误");
              }
            });
    },
         
    tablePage(currentPage) {
      this.loading = true;

      var params = new URLSearchParams();
      for (var i = 0; i < this.modelData.headerList.length; i++) {
        params.append("keyIds", this.modelData.headerList[i].keyId);
      }
      params.append("modelIds", this.modelData.modelIdList);
      params.append("currentPage", currentPage);

      axios
        .post(Config.g_service_url + "/modelfilterbyid", params)
        .then(response => {
            this.filterModelType = 'id'
          
          if (response.data.status == 200) {
              this.count = response.data.data.total;
            this.modelData = response.data.data;
              this.initSelectnnnn();
          } else {
            this.modelData.modelList = [];
          }
          this.loading = false;
        })
        .catch(error => {});
    },
    handleClick(tab, event) {
      this.pagepdIndex = 0
      this.queryColuMainInfo();
      this.$refs.maintainCarList.doLayout();
},
    idSubmit: function() {
      // this.modelTableShow = true;
      // this.loading = true;

      var modelData = new Object();
      modelData.headerList = this.keyIds;
      modelData.currentPage =this.currentPage;
      modelData.modelIdList = this.getModelIds();
      modelData.modelList = [];
      this.modelData = modelData;

      this.tablePage(this.currentPage);
      this.filterShow2 = false;
      this.modelTableShow = true;
    },
    getModelIds: function() {
      var texts = [],
        texts = this.textarea.split("\n");
      for (var i = 0; i < texts.length; ) {
        var id = 0;
        try {
          id = Number.parseInt(texts[i].trim());
        } catch (error) {}
        if (Number.isNaN(id)) {
          texts.splice(i, 1);
        } else {
          i++;
        }
      }
      return texts;
    },
    textareaInput: function() {
      var texts = [],
        texts = this.getModelIds();
      this.countId = texts.length;
    },
    objectSpanMethod: function({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        if (rowIndex === 0) {
          return {
            rowspan: this.list.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    bindAllCar() {
      if (
        !this.modelData.modelIdList ||
        this.modelData.modelIdList.length === 0
      ) {
        return;
      }
      this.$confirm("此操作绑定上所有筛选出来的车型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.modelTableLoading = true;

          let modelAdd = {
            goodsId: this.goodsId,
            tempId: this.modelData.tempId //车型ID字符串 逗号隔开
          };
          MaintainApi.doPDLinkCarListByTemp(this, modelAdd).then(res => {
            if (res.retCode) {
              console.log("商品匹配车型", res);
              this.$message("关联成功");
              this.queryColuMainInfo();

      this.initSelectnnnn()

            } else {
              this.$message("关联失败");
              this.modelTableLoading = false;
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消绑定"
          });
        });
    },

    filterInit: function() {
      axios
        .post(Config.g_service_url + "/modelfilterinit")
        .then(response => {
          var list = response.data.data;
          for (var i = 0; i < list.length; i++) list[i].text = "";
          this.list = list;
        })
        .catch(error => {});
    },

    setKeyIds: function(val) {
      this.keyIds = val;
    },
    inputFocus: function(row) {
      this.inputRow = row;
    },
    inputed: function(val) {
      this.inputRow.text = val;
    },

    querySearch: function(queryString, callback) {
      axios
        .post(
          Config.g_service_url + "/lenovo",
          "keyId=" + this.inputRow.keyId + "&text=" + queryString
        )
        .then(response => {
          console.log("res", response);
          var rs = response.data.data;
          var restaurants = [];
          for (var i = 0; i < rs.length; i++) {
            restaurants.push({ valueKey: rs[i].text, value: rs[i].text });
          }
          //var restaurants = this.restaurants;
          var results = queryString
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants;
          // 调用 callback 返回建议列表的数据
          callback(results);
        })
        .catch();
    },
    querySearch2: function(queryString, callback) {
      var params = new URLSearchParams();
      params.append("keyId", this.inputRow.keyId);
      params.append("text", queryString);
      for (var i = 0; i < this.list.length; i++) {
        var text = this.list[i].text.trim();
        if (text != "") params.append(this.list[i].keyId, text);
      }
      axios
        .post(Config.g_service_url + "/property/autocomplete", params)
        .then(response => {
          var restaurants = response.data.data;
          //var restaurants = this.restaurants;
          //var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          //调用 callback 返回建议列表的数据
          callback(restaurants);
        })
        .catch();
    },
    createFilter: function(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },

    changeCancelList(val) {
      this.cancelCar.selectCancelList = val;
    },
    setSelected: function(val) {
      console.log(val);
      this.editerData.selectedModel = val;
    },
    //初始化筛选字段
    screenInit: function() {
      if (this.list.length > 0) {
        this.screenShow = !this.screenShow;
      } else {
        RoundApi.initFilterList().then(res => {
          if (res.retCode) {
            console.log("初始化", res);
            this.list = res.data;
          }
        });
      }
      console.log(this.screenShow);
    },

    setKeyIds: function(val) {
      this.keyIds = val;
    },
    handleContentType(row) {
      switch (row) {
        case "IMAGE":
          return "图片";
        case "TEXT":
          return "文本";
        case "URL":
          return "链接";
      }
    },
    initSelectnnnn() {
      console.log("");
      // this.$refs.multipleTable.clearSelection();

      console.log("设置");

      this.editerData.selectedModel = [];
      this.initHaveCarList = [];
      if (!this.modelData.modelList) {
        this.modelTableLoading = false;
        this.isInitSelectnnnn = false;
        return;
      }

      let idArr = this.modelData.modelIdList.slice(
        (this.pageIndex - 1) * 20,
        this.modelData.modelIdList.length < this.pageIndex * 20
          ? this.modelData.modelIdList.length
          : this.pageIndex * 20
      );

      let pagepdIndex = this.pagepdIndex + 1;
      let selectIdArr = this.selectCarIdList;
      // .slice(
      //   (this.pagepdIndex - 1) * 20,
      //   this.modelData.modelIdList.length < this.pagepdIndex * 20
      //     ? this.modelData.modelIdList.length
      //     : this.pagepdIndex * 20
      // );


      idArr.forEach((model, modelIndex) => {
        let count = 0;
        let opt = { dis: false };

        selectIdArr.forEach((carid, caridIndex) => {
          parseInt(carid) === model ? count++ : "";
        });
        count > 0 ? (opt.dis = true) : "";

        this.modelData.modelList[modelIndex].dis === undefined
          ? Object.assign(this.modelData.modelList[modelIndex], opt)
          : (this.modelData.modelList[modelIndex].dis = opt.dis);
      });

      this.$refs.multipleTable.doLayout();
          this.modelTableLoading = false;
        this.isInitSelectnnnn = false;


      //   idArr.forEach((model, modelIndex) => {

      // selectIdArr.forEach((carid, caridIndex) => {
      //     if (parseInt(carid) === model) {
      //       this.editerData.selectedModel.push(
      //         this.modelData.modelList[modelIndex]
      //       ); //需要被动态选择的对象
      //       if (this.maintainCarList[caridIndex / pagepdIndex]) {
      //         this.initHaveCarList.push(
      //           this.maintainCarList[caridIndex / pagepdIndex]
      //         ); //不变的已绑定的对象
      //       }
      //     }
      //   });
      // });
   
   
  //  setTimeout(() => {
  //       this.editerData.selectedModel.forEach((model, caridIndex) => {
  //         this.$refs.multipleTable.toggleRowSelection(model);
  //       });
  //       this.modelTableLoading = false;
  //       this.isInitSelectnnnn = false;
  //     }, 1000);



    },

    handleCurrentChange(val) {
      console.log(this.filterModelType)
       if(this.filterModelType === 'atrr'){
      this.pageIndex = val;
      this.onsubmit();
       }else{
     this.currentPage = val;
      this.idSubmit();
       }

      
    },
    onsubmit: function() {
      var params = new URLSearchParams();
      for (var i = 0; i < this.keyIds.length; i++) {
        params.append("keyIds", this.keyIds[i].keyId);
      }
      params.append("currentPage", this.pageIndex);

      console.log(this.list);
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].text.trim() != "")
          params.append(this.list[i].keyId, this.list[i].text);
      }
      this.modelTableShow = true;
      this.modelTableLoading = true;
      this.isInitSelectnnnn = true;
      axios
        .post(Config.g_service_url + "/modelfilter", params)
        .then(
          function(response) {
            console.log("筛选之后", response.data);
            this.filterModelType = 'atrr'
            if (response.data.status === 200) {
              this.count = response.data.data.total;
              this.modelData = response.data.data;
              this.initSelectnnnn();
            } else {
              this.$message(response.data.message);
              this.modelTableLoading = false;
              // this.modelTableShow = false;
              this.isInitSelectnnnn = false;
            }
          }.bind(this)
        )
        .catch(error => {
          this.modelTableLoading = false;
          // this.modelTableShow = false;
          this.isInitSelectnnnn = false;
        });

      this.screenShow = false;
    },

    doAddMaintainCar() {
      console.log("===================");

      console.log(this.editerData.selectedModel);

      // this.maintainCarDialog.open();
      console.log("===================");

      this.maintainCarDialog.show = true;
    },

    getMaintainItemData() {
      let dt = this.$refs.maintainDialog.getMaintainList();

      console.log(dt);
    },

    doMaintain() {
      this.maintainItems.show = true;
    },

    submitMaintainData() {
      this.$alert("提交维护信息");
    },

    saveColumnItem() {
      MaintainApi.saveColumnItem(this, {
        goodsId: this.goodsId,
        showStatus: this.isHide,
        maintainColumnName: this.ColumnName
      }).then(res => {
        console.log("修改", res);
        if (res.retCode) {
          this.$message("保存成功");
          this.queryColumnItem();
        }
      });
    },
    queryColumnItem() {
      MaintainApi.queryColumnItem(this, {
        goodsId: this.$route.params.goodsId
      }).then(res => {
        if (res.retCode) {
          if (res.data.length != 0) {
            console.log("查询栏目", res);
            this.ColumnName = res.data[0].columnName;
            this.isHide = res.data[0].showStatus;
          }
        }
      });
    },
    handleCurrentProductChange(val) {
      console.log(val);
      this.pagepdIndex = parseInt(val) - 1;

      this.queryColuMainInfo();
    },
    queryColuMainInfo() {
      let goodsId = "";
      if ((this.$route.params.goodsId || "") != "") {
        goodsId = this.$route.params.goodsId;
      } else {
        goodsId = this.goodsId;
      }

      // this.goodsId   添加时
      // this.$route.params.goodsId  修改时

      MaintainApi.queryPDLinkCarList(this, {
        goodsId: goodsId,
        page: this.pagepdIndex,
        pageSize: 20
      }).then(res => {
        console.log("查询商品绑定的车型", res);
        this.maintainCarList = res.data.carList;
        this.pdcount = res.data.page.total;
        this.selectCarIdList = res.data.carIdList;

        this.initSelectnnnn();
      });
    },

    doLinkCarMaintain(row) {
        this.maintainData.show = true;
   
      
      
    },
    getCarGroupMainList() {
      MaintainApi.getCarGroupMainList(
        this.maintainData.carGroupId
      ).then(res => {
        console.log("查询分组绑定的栏目", res);
        this.carGroupMainList = res.data;
      });
    },
    doLinkMaintain(row) {
      this.AttributeList = [];
      this.maintainData.carGroupId = row.carGroupId;
      this.carMainTain.show = true;
      this.getCarGroupMainList();
    },

    loadAllColumn() {
      MaintainApi.queryColumnandGroup(this.goodsId).then(res => {
        this.maintainColumnList = res.data;

        console.log("maintain .....", res.data);
        console.log("==========>");

        console.log(this.maintainColumnList);
      });
    },

    addGroup() {
      this.groupModel.show = true;
    },
    addColumn() {
      this.columnModel.show = true;
    },
    submitAddColumn() {
      let columnName = this.columnModel.name;

      MaintainApi.addMaintainColumn(this.goodsId, columnName).then(res => {
        if (res.retCode) {
          this.columnModel.show = false;

          this.loadAllColumn();
        } else {
          this.$alert("添加栏目失败");
        }
      });
    },

    setCarGroupMainList(val) {
      console.log(val);
      this.selectClumnNewGroup = val;
    },
    addSubmitAddNewGroup() {
      let catId = [];
      this.selectClumnNewGroup.forEach((item, index) => {
        catId.push(item.maintainColumnId);
      });
      MaintainApi.addGroupNewMainList(
        this.maintainData.carGroupId,
        catId.join(",")
      ).then(res => {
        if (res.retCode) {
          this.columnNewGroupModel = !this.columnNewGroupModel;

          this.getCarGroupMainList();
        }
      });
    },
    queryColumnNewGroup() {
      let model = {};
      RoundApi.getMaintainList(this, { catId: this.catId }).then(res => {
        if (res.retCode) {
          console.log("列表", res);
          this.columnNewGroupModel = !this.columnNewGroupModel;
          this.columnNewGroupList = res.data;
        } else {
          this.$alert("获取栏目失败");
        }
      });
    },

    //显示栏目下的属性
    queryEditAttribute(row) {
      this.maintainColumnId = row.maintainColumnId;
      MaintainApi.queryEditAttribute(
        this.maintainData.carGroupId,
        this.maintainColumnId
      ).then(res => {
        if (res.retCode) {
          console.log("查询分组的栏目属性", res);
          this.AttributeList = res.data;
        }
      });
    },
    // 编辑属性
    doEditAttribute() {
      console.log(this.attributeForm);
      if (this.attributeForm.contentType === "IMAGE") {
        let contentUrl = [];
        this.uploadModel.fileList.forEach((item, index) => {
          contentUrl.push(item.url);
        });
        Object.assign(this.attributeForm, { contentUrl: contentUrl.join(",") });
      }

      MaintainApi.editAttribute(
        this,
        this.attributeForm,
        this.maintainData.carGroupId
      ).then(res => {
        if (res.retCode) {
          console.log("编辑属性", res);
          this.queryEditAttribute({ maintainColumnId: this.maintainColumnId });
          this.editAttribute = !this.editAttribute;
        } else {
          this.$alert("保存失败");
        }
      });
    },

    //隐藏 显示
    eidtAttributeHidden(row) {
      let model = {};
      Object.assign(model, row);
      model.showStatus = !model.showStatus;
      MaintainApi.editAttribute(
        this,
        model,
        this.maintainData.carGroupId
      ).then(res => {
        console.log(res);
        if (res.retCode) {
          this.$message("保存成功");
          this.queryEditAttribute({
            maintainColumnId: this.maintainColumnId
          });
        } else {
          this.$alert("修改失败");
        }
      });
    },
    // 编辑属性 打开弹窗
    queryEidtAttribute(row) {
      let attributeForm = {};
      Object.assign(attributeForm, row);
      console.log(" attributeForm.contentUrl", attributeForm.contentUrl);
      if (attributeForm.contentType === "IMAGE" && attributeForm.contentUrl) {
        this.uploadModel.fileList = [];
        if (
          attributeForm.contentUrl.split(",").length > 0 &&
          attributeForm.contentUrl.split(",")[0] != ""
        ) {
          console.log(1);
          attributeForm.contentUrl.split(",").forEach((item, index) => {
            this.uploadModel.fileList.push({ name: "1.png", url: item });
          });
        }
      }
      this.attributeForm = attributeForm;

      this.editAttribute = !this.editAttribute;
    },

    delColumn(row) {
      this.$confirm("此操作将永久删除该栏目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          MaintainApi.delColumn(
            this,
            row.carGroupMaintainColumnLinkId
          ).then(res => {
            console.log(res);
            if (res.retCode) {
              this.$message("删除栏目成功");
              this.getCarGroupMainList();
            } else {
              this.$alert("删除栏目失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    delGroup(row) {
      this.$confirm("此操作将永久删除该分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          MaintainApi.delGroup(this, row.carGroupId).then(res => {
            if (res.retCode) {
              this.$message("删除分组成功");
              this.loadAllColumn();
            } else {
              this.$alert("删除分组失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    submitAddGroup() {
      let groupName = this.groupModel.name;
      console.log(groupName);
      MaintainApi.addColumnGroup(this.goodsId, groupName).then(res => {
        if (res.retCode) {
          this.groupModel.show = false;

          this.loadAllColumn();

          // this.loadAllColumn();
        } else {
          this.$alert("添加栏目失败");
        }
      });
    }
  },
  mounted() {
    this.uploadModel.uploadUrl = Config.g_upload_url;
    this.queryColuMainInfo(); //查询商品绑定的车型
    this.queryColumnItem(); //查询栏目
    this.modelData = [];
      this.list = [];
      this.pageIndex = 1;
      this.currentPage = 1;
      this.screenInit();
  }

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
